<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i> 合作入驻
                </el-breadcrumb-item>
                <el-breadcrumb-item>员工录入</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box" style="width: 80%">
                <el-form ref="sizeForm"  :rules="rules" :model="sizeForm" label-width="80px" size="mini">
                    <el-form-item label="身份证号 " prop="id_card">
                        <el-input v-model="sizeForm.id_card"></el-input>
                    </el-form-item>
                    <el-form-item label="员工部门 " prop="department">
                        <el-radio-group v-model="sizeForm.department" size="medium">
                            <el-radio border
                                      v-for="kind in kinds"
                                      :label="kind"
                                      :key="kind.dep_id">{{kind.dep_name}}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="员工工号 ">
                        <el-input v-model="sizeForm.staff_num" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="员工姓名 " prop="staff_name">
                        <el-input v-model="sizeForm.staff_name"></el-input>
                    </el-form-item>
                    <el-form-item label="电话号码 " prop="phone">
                        <el-input v-model="sizeForm.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="员工职级 " prop="role_name">
                        <el-radio-group v-model="sizeForm.role_name" size="medium">
                            <el-radio border
                                      v-for="kind in kinds1"
                                      :label="kind.staff_role_value"
                                      :key="kind.staff_role_value"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="紧急电话 " prop="tel">
                        <el-input v-model="sizeForm.tel"></el-input>
                    </el-form-item>
                    <el-form-item label="家庭住址 " prop="addr">
                        <el-input v-model="sizeForm.addr"></el-input>
                    </el-form-item>

                    <el-form-item label="入职时间 " prop="join_date">
                        <el-col :span="11">
                            <el-date-picker type="date" placeholder="选择日期" v-model="sizeForm.join_date" style="width: 100%;"></el-date-picker>
                        </el-col>
                    </el-form-item>

                    <el-form-item size="large">
                        <el-button type="primary" @click="submitForm('sizeForm')">立即创建</el-button>
                        <el-button @click="resetForm('sizeForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'comeInStaffAndDesigner',
    data() {
        //装修团队名称
        var name = (rule, value, callback) => {
            if (value.trim() === '') {
                callback(new Error('请输入不为空的装修团队名'));
            }else {
                callback();
            }
        };
        //装修团队地址
        var address = (rule, value, callback) => {
            if (value.trim() === '') {
                callback(new Error('请输入不为空的装修团队地址'));
            }else {
                callback();
            }
        };
        //身份证
        var idcard = (rule, value, callback) => {
            if (value.trim() === '') {
                callback(new Error('请输入不为空的身份证号码'));
            }else {
                callback();
            }
        };

        //姓名
        var idname = (rule, value, callback) => {
            if (value.trim() === '') {
                callback(new Error('请输入不为空的姓名'));
            }else {
                callback();
            }
        };
        //电话号码
        var phone = (rule, value, callback) => {
            if (value.trim() === '') {
                callback(new Error('请输入不为空的电话号码'));
            }else {
                callback();
            }
        };
        //备用电话号码
        var rephone = (rule, value, callback) => {
            if (value.trim() === '') {
                callback(new Error('请输入不为空的备用电话号码'));
            }else if (value.trim() ===this.sizeForm.phone){
                callback(new Error('备用电话号码不能和第一号码相同'));
            }
            else {
                callback();
            }
        };
        return {
            kinds:[],
            kinds1:[],
            sizeForm: {
                tel:'',
                department: '',
                staff_num: '',
                staff_name: '',
                phone: '',
                addr: '',
                id_card: '',
                join_date:'',
                role_name:''
            },
            rules: {
                addr: [
                    { validator: address, trigger: 'blur' ,required: true,trigger: 'blur' },
                    { min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'change' }
                ],
                phone: [
                    { required: true,validator: phone, trigger: 'blur' },
                    { pattern: /^1(3|4|5|6|7|8|9)\d{9}$/, message: '请输入有效的电话号码' }
                ],
                tel: [
                    { required: true,validator: rephone, trigger: 'blur' },
                    { pattern: /^1(3|4|5|6|7|8|9)\d{9}$/, message: '请输入有效的备用电话号码' }
                ],
                department: [
                    { required: true, message: '请选择所属部门!', trigger: 'blur' }
                ],
                role_name: [
                    { required: true, message: '请选择员工职级!', trigger: 'blur' }
                ],
                id_card: [
                    { required: true,validator: idcard, trigger: 'blur' },
                    { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入有效的身份证号码' }
                ],
                staff_name: [
                    { required: true,validator: idname, trigger: 'blur' },
                    { pattern: /(^[\u4e00-\u9fa5]{1}[\u4e00-\u9fa5\.·。]{0,8}[\u4e00-\u9fa5]{1}$)|(^[a-zA-Z]{1}[a-zA-Z\s]{0,8}[a-zA-Z]{1}$)/, message: '请输入有效的姓名' }
                ],
                join_date: [
                    { type: 'date', required: true, message: '请输入装修团队入驻日期', trigger: 'blur' }
                ]
            }
        };
    },
    methods: {

        submitForm(formName) {
            console.log(this.sizeForm);
            this.$refs[formName].validate((valid) => {
                if (valid) {
                        let _this = this;
                        let params = new URLSearchParams();

                        params.append("departmentId",this.sizeForm.department.dep_id);
                        params.append("staff_num",this.sizeForm.staff_num);
                        params.append("staff_name",this.sizeForm.staff_name);
                        params.append("tel",this.sizeForm.tel);
                        params.append("addr",this.sizeForm.addr);
                        params.append("id_card",this.sizeForm.id_card);
                        params.append("join_date",this.sizeForm.join_date);
                        params.append("phone",this.sizeForm.phone);
                        params.append("role_name",this.sizeForm.role_name);

                        console.log(typeof params);
                        console.log(params);
                        // this.$http.post('friendlyCompany/creatDecorationCompany',params
                        this.$axios.post('friendlyCompany/creatStaff',params
                        )
                        //then获取成功；response成功后的返回值（对象）
                            .then(response=>{
                                console.log(response);
                                console.log(response.data);
                                if (response.data=='1'){
                                    this.$message.success('新建员工成功');
                                    tel:'',
                                    this.sizeForm.department= '',
                                    this.sizeForm.staff_num= this.sizeForm.staff_num+parseInt(response.data),
                                    this.sizeForm.staff_name= '',
                                    this.sizeForm.phone= '',
                                    this.sizeForm.tel= '',
                                    this.sizeForm.addr= '',
                                    this.sizeForm.id_card= '',
                                    this.sizeForm.join_date='',
                                    this.sizeForm.role_name=''
                                }else{
                                    this.$message.error(response.data);
                                }
                            })
                            //获取失败
                            .catch(error=>{
                                console.log(error);
                                this.$message.error('网络或服务错误，不能访问');
                            })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }

    }
    ,created() {

        //拿到部门种类及职级
        this.$axios.get('friendlyCompany/getDepartments')
        //then获取成功；response成功后的返回值（对象）
            .then(response=>{
                console.log(response.data.forlist)
                this.kinds = response.data.forlist;
                this.kinds1 = response.data.forlist1;
                console.log(response.data);
            })
            //获取失败
            .catch(error=>{
                this.loading=false;
                console.log(error);
                this.$message.error('网络或服务错误，不能访问');
            });
        console.log("轮到工号了");
        //拿到工号
        this.$axios.get('friendlyCompany/getDesignerNum')
        //then获取成功；response成功后的返回值（对象）
            .then(response=>{
                console.log(response);
                this.sizeForm.staff_num = response.data;
                console.log(response.data);

            })
            //获取失败
            .catch(error=>{
                this.loading=false;
                console.log(error);
                this.$message.error('网络或服务错误，不能访问');
            })
    }
};
</script>